<!--Jquery
    AJAX局部刷新技术，替代form表单
    <script src="/JS/jquery-3.7.1.js"></script>

 -->





<!-- 
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jquery</title>
     <script src="../JS/jquery-3.7.1.js"></script>
     <script>
 
         window.onload = function () {
             console.log("页面加载完毕");
         }
 
 
         $(function () {
             console.log("dom解析完毕");
 
             $("span").click(function () {     //  jquery获取目标+绑定事件
                 $(this).css({                //  修改内容
                     "color": "white",
                     "background-color": "lightpink"
                 })
             })
 
 
 
             let span = document.querySelector("span")
             span.addEventListener("click", function () {
                 console.log("js对象");
             })
         })
 
 
         let spans = $("span")
         console.log(spans);
         console.log(spans[0]);
 
 
 
     </script>
 
 </head>
 
 <body>
     <span>测试</span>
     <span>测试</span>
     <span>测试</span>
     <span>测试</span>
     <span>测试</span>
 </body>
 
 </html> -->




























<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="/JS/jquery-3.7.1.js"></script>
    <script>
        window.onload = function () {
            console.log("页面加载完毕");
        }




        // 
        $(function () {
            console.log("dom解析完毕");
            console.log($("span"));
            $("span").click(function () {
                $(this).css({
                    "color": "red",
                    "background-color": "lightpink"
                })

            })
        })




    </script>
</head>

<body>
    <span>测试</span>
    <span>测试</span>
    <span>测试</span>
    <span>测试</span>
    <span>测试</span>


</body>

</html>